<template>
  <div>
    <cp-nav-bar
      :title="formData.id ? '编辑患者' : '添加患者'"
      :rightText="formData.id ? '更新' : '保存'"
      @click-left="clickLeft"
      @click-right="clickRight"
    />
    <van-form ref="formRef" label-width="80px" @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="formData.name"
          name="name"
          label="真实姓名"
          placeholder="真实姓名"
          :rules="[
            { required: true, message: '请填写真实姓名' },
            { pattern: /^(?:[\u4e00-\u9fa5·]{2,6})$/, message: '姓名只能输入两位到6位' }
          ]"
        />
        <van-field
          v-model="formData.idCard"
          name="idCard"
          label="身份证号"
          placeholder="身份证号"
          :rules="[
            { required: true, message: '身份证号' },
            { validator: validator, message: '身份证号格式不对，请重新输入' }
          ]"
        />
        <!-- <GenderCom :gender="formData.gender" @update="formData.gender = $event" /> -->
        <!-- <GenderCom v-model:gender="formData.gender" /> -->
        <GenderCom v-model="formData.gender" />

        <van-field name="defaultFlag" label="默认就诊人">
          <template #input>
            <van-checkbox v-model="defaultFlagComputed" />
          </template>
        </van-field>
      </van-cell-group>
    </van-form>
  </div>
</template>

<script lang="ts">
export default {
  name: 'PatientDetailCom'
}
</script>
<script setup lang="ts">
import { ref, reactive, computed, watch } from 'vue'
import GenderCom from './Gender.vue'
import { showToast } from 'vant'
import { addPatientRequest, updatePatientRequest } from '../../../services/user'

// any-rule 这个是github的 第三方仓库，有很多很好的正则  https://github.com/any86/any-rule
// id-validator 专门校验身份证号的一个包  https://www.npmjs.com/package/id-validator
// https://xbeginagain.github.io/generator/ 生成一个敏感信息的
// http://id.dcode.top/ 敏感信息网站

// pnpm install id-validator
import IDValidator from 'id-validator'
import { watchEffect } from 'vue'

const Validator = new IDValidator()
// 如果想要在控制台访问Validator这个变量，就在这个变量下面 写debugger
// 这样浏览器的控制器就会有这个 环境， 变量
// debugger
// console.log(111, Validator.isValid('420106201002023357'))
const validator = (val) => {
  return Validator.isValid(val)
}

const props = defineProps({
  currentItem: {
    type: Object,
    default: () => ({})
  }
})
// if(prop.xx.id) {
//   await getxxxx()
// } else {

// }

const formRef = ref<any>(null)

const emits = defineEmits(['click-left'])
const formData = reactive<any>({
  name: '',
  idCard: '',
  defaultFlag: 0,
  gender: 0 // 后端的字段 0是女  1是男
})

// 问题： 怎么样将父组件传递进来的 props 赋值给我们子组件里面的 formData
console.log(3333)

watchEffect(() => {
  console.log(props.currentItem)
  if (props.currentItem?.id) {
    formData.name = props.currentItem.name
    formData.idCard = props.currentItem.idCard
    formData.defaultFlag = props.currentItem.defaultFlag
    formData.gender = props.currentItem.gender
    formData.id = props.currentItem.id
  } else {
    delete formData.id
  }
})

// watch(
//   () => props.currentItem,
//   // props,
//   (newVal, oldVal) => {
//     console.log(newVal)
//   },
//   { deep: true, immediate: true }
// )

// if (props.currentItem.id) {
//   formData.name = props.currentItem.name
//   formData.idCard = props.currentItem.idCard
//   formData.defaultFlag = props.currentItem.defaultFlag
//   formData.gender = props.currentItem.gender
//   formData.id = props.currentItem.id

//   // formData.value = props.currentItem  推荐使用ref去定义一些内容，在重新赋值的时候比较方便
// }

// 计算属性的get set的使用场景
// 有些时候，组件的状态和服务器接口需要的值不一样，就需要使用计算属性的get set
// 之前我做过一个项目，有一个复选框选择的UI界面， 组件的值默认是true和false。但是服务器接口需要的值是 0 和 1，为了后面发请求方便，所以需要使用计算属性的get和set。 get函数里面返回的是true和false，控制复选框的勾选和取消。 set函数就是去设置服务器的接口需要的数据 0 和 1
const defaultFlagComputed = computed({
  get() {
    return formData.defaultFlag === 0 ? false : true
  },
  set(val) {
    val ? (formData.defaultFlag = 1) : (formData.defaultFlag = 0)
  }
})

const onSubmit = async () => {
  // https://zhuanlan.zhihu.com/p/21286417 身份证号的规则，
  // 倒数第二位 奇数是男  偶数是女
  const isFemale = (formData.idCard.slice(-2, -1) as any) % 2
  // 0 === 0   1 === 1
  // formData.gender 是用户在页面上点击的时候，出现的值 男是1  女是0
  // isFemale 是 身份证倒数第二位 和 2取余数的值， 如果是0表示是女性，如果是1表示是男性
  if (formData.gender !== isFemale) {
    showToast('你的身份证性别和你选的性别不一致，请重新选择')
    return
  }

  const res = formData.id ? await updatePatientRequest(formData) : await addPatientRequest(formData)

  resetForm()
  emits('click-left', 1)
}

const clickLeft = () => {
  resetForm()
  // formData.value = {}

  emits('click-left')
}

const resetForm = () => {
  formData.name = ''
  formData.idCard = ''
  formData.defaultFlag = 0
  formData.gender = 0
  formData.id = null
}

const clickRight = () => {
  console.log('发请求，保存数据')
  formRef.value.submit()
}
</script>
